<template>
  <div class="select-input">
    <t-select
      v-model="selectValue"
      :placeholder="selectPlaceholder"
      class="select-view"
      :options="options"
      @change="handleSelectChange"
    ></t-select>
    <t-input
      v-model="inputValue"
      :clearable="true"
      :placeholder="inputPlaceholder"
      class="input-view"
      :disabled="inputDisable"
      @change="handleInputChange"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, PropType, ref, watch } from 'vue';

const props = defineProps({
  select: {
    type: String as any,
    default: '',
  },
  input: {
    type: String as any,
    default: '',
  },
  options: {
    type: Array as PropType<any[]>,
    default: () => {
      return [];
    },
  },
  selectPlaceholder: {
    type: String as any,
    default: '请选择',
  },
  inputPlaceholderData: {
    type: Object as any,
    default: () => {
      return {};
    },
  },
  inputDisable: {
    type: Array as any,
    default: () => {
      return [];
    },
  },
});

const emits = defineEmits(['update:select', 'update:input']);

const selectValue = ref<any>('');
const inputValue = ref<any>('');

const inputPlaceholder = computed(() => {
  return props.inputPlaceholderData[selectValue.value] || '请输入值';
});

const inputDisable = computed(() => {
  return props.inputDisable.includes(selectValue.value);
});

watch(
  () => [props.select, props.input],
  (list) => {
    [selectValue.value, inputValue.value] = list;
  },
  { immediate: true, deep: true },
);

const handleSelectChange = (val: any) => {
  emits('update:select', val);
};

const handleInputChange = (val: any) => {
  emits('update:input', val);
};
</script>

<style lang="less" scoped>
.select-input {
  width: 272px;
  display: flex;
  align-items: center;
  border-radius: 2px;

  .select-view {
    width: 100px;

    :deep(.t-input__wrap) {
      width: 100%;

      .t-input {
        border-radius: 4px 0 0 4px;
      }
    }
  }

  .input-view {
    flex: 1;
    border: none;

    :deep(.t-input) {
      border-radius: 0 4px 4px 0;
    }
  }
}
</style>
